<template>
 <div>

  <div style="margin-bottom: 5px;">
    <el-input v-model="name" suffix-icon="el-icon-search" placeholder="请输入名字" style="width: 200px;" @keyup.enter.native="loadPost"></el-input>
    <el-input v-model="vendorName" suffix-icon="el-icon-search" placeholder="请输入供应商" style="width: 200px;margin-left:5px;" @keyup.enter.native="loadPost"></el-input>
    <el-button  type="primary" style="margin-left: 5px;" @click="loadPost">查询</el-button>
    <el-button type="success" @click="reset">重置</el-button>

    <el-button  type="primary" style="margin-left: 5px;" @click="add">新增</el-button>
  
    <el-button type="primary">批量删除</el-button>
  </div>

  <el-table :data="tableData"
    :header-cell-style="{background:'#f2f5fc',color: '#555555'}"
    border
  >
        <el-table-column prop="id" label="ID" width="60">
        </el-table-column>

        <el-table-column prop="name" label="名称" width="">
        </el-table-column>

        <el-table-column prop="number" label="数量" width="60">
        </el-table-column>

        <el-table-column prop="price" label="价格" >
        </el-table-column>

        <el-table-column prop="type" label="商品类型" >
        </el-table-column>

        <el-table-column prop="inType" label="入库类型" >
        </el-table-column>

        <el-table-column prop="address" label="地址" >
        </el-table-column>
        
        <el-table-column prop="inTime" label="入库时间" width="180">
        </el-table-column>

        <el-table-column prop="operator" label="操作员" >
        </el-table-column>

        <el-table-column prop="vendorName" label="供应商" >
        </el-table-column>

        <el-table-column prop="operate" label="操作" width="180">

          <template slot-scope="scope">
            <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
          <!-- <el-button size="small" type="danger">删除</el-button> -->
          <el-popconfirm title="确定删除吗?" @confirm="handleDelete(scope.row.id)" style="margin-left: 5px;">
            <template #reference>
              <el-button
                size="small"
                type="danger"
              >删除</el-button>
            </template>
          </el-popconfirm>
         </template>
        

        </el-table-column>
      </el-table>

      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageNum"
      :page-sizes="[5, 10, 20,30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 5px;">
    </el-pagination>

    

    <el-dialog
      title="入库物品"
      :visible.sync="centerDialogVisible"
      :before-close="handleClose"
      center>
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
       
        <!-- <el-form-item label="名称">
         <el-col :span="20">
          <el-input v-model="form.name"></el-input>
         </el-col>
        </el-form-item> -->

       
        <el-form-item label="商品ID" prop="goodsId">
         <el-col :span="20">
          <el-input v-model="form.goodsId"></el-input>
         </el-col>
        </el-form-item>

        <el-form-item label="入库类型" prop="inType">
         <el-col :span="20">
          <el-input v-model="form.inType"></el-input>
         </el-col>
        </el-form-item>

        <el-form-item label="数量" prop="number">
         <el-col :span="20">
          <el-input v-model="form.number"></el-input>
         </el-col>
        </el-form-item>

        <el-form-item label="价格" prop="price">
         <el-col :span="20">
          <el-input v-model="form.price"></el-input>
         </el-col>
        </el-form-item>

        <!-- <el-form-item label="商品类型">
         <el-col :span="20">
          <el-input v-model="form.type"></el-input>
         </el-col>
        </el-form-item> -->

        <!-- <el-form-item label="地址">
         <el-col :span="20">
          <el-input v-model="form.address"></el-input>
         </el-col>
        </el-form-item> -->

        <!-- <el-form-item label="入库时间">
         <el-col :span="20">
          <el-date-picker v-model="form.inTime" value-format="YYYY-MM-DD" type="date" clearable></el-date-picker>
         </el-col>
        </el-form-item>

        <el-form-item label="操作员">
         <el-col :span="20">
          <el-input v-model="form.operator"></el-input>
         </el-col>
        </el-form-item>

        <el-form-item label="供应商">
         <el-col :span="20">
          <el-input v-model="form.vendorName"></el-input>
         </el-col>
        </el-form-item> -->


      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </el-dialog>


 </div>
</template>

<script>
export default {
  name: "Main",
  data() {
      return {
        // 每页多少条
        pageSize:10,
        // 当前页
        pageNum:1,
        name:'',
        vendorName:'',
        total:0,
        tableData: [{
          id:"1",
          name:"111",
          number: 1,
          price: 111,
          type:2222,
          inType:"网购"

        }],
        centerDialogVisible: false,
        form:{
          goodsId:'',
          inType: '',
          // name:'',
          number:'',
          // price:'',
          // type:'',
          price:''
          // address:'',
          // inTime:'',
          // operator:'',
          // vendorName:''
        },
        rules: {
          goodsId: [
              { required: true, message: '请输入商品名称', trigger: 'blur' },
              { min: 1, max: 5, message: '长度在1到8个字符', trigger: 'blur' },
          ],
          inType:[
              { required: true, message: '请输入入库类型', trigger: 'blur' },
              { min: 1, max: 5, message: '长度在3到8个字符', trigger: 'blur' },
          ],
          number:[
              { required: true, message: '请输入数量', trigger: 'blur' },
              { min: 1, max: 5, message: '长度在3到8个字符', trigger: 'blur' },
          ],
          price:[
              { required: true, message: '请输入价格', trigger: 'blur' },
              { min: 1, max: 5, message: '长度在3到8个字符', trigger: 'blur' },
          ]
        },
        
      }
    },
  methods:{
    // 重置表单
    resetForm(){
      this.$refs.form.resetFields();
    },

    // 当前页，每页几条发生改变时
    handleSizeChange(val) {
        this.pageNum = 1
        this.pageSize=val
        console.log(`${val} items per page`);
        this.loadPost()
      },
      handleCurrentChange(val) {
        // 设置当前页
        this.pageNum = val
        // 查询
        this.loadPost()
        console.log(`current page: ${val}`);
      },
     
    // 获取入库页面数据
    loadPost(){
      this.$axios.post('/api/in_warehouse/page',{

        "name": this.name,
	      "pageNo": this.pageNum,
	      "pageSize": this.pageSize,
	      "vendorName": this.vendorName
      }).then(res => {
        console.log(res);
        if(res.data.code == "200"){
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        } 

      })
    },

    // 重置数据
    reset(){
      this.name = ''
      this.vendorName = ''
      this.loadPost()
    },

    // 新增
    add(){
      this.centerDialogVisible = true
      this.$nextTick(() => {
        this.resetForm();
      })
    },
    // 确认关闭模态框
    handleClose(done) {
        this.$confirm('Are you sure to close this dialog?')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    // 新增
    doSave(){
      this.$axios.post('/api/in_warehouse/add',this.form).then(res => {
      console.log(res);
      if(res.data.code == "200"){
        this.loadPost();
        this.centerDialogVisible = false
        // alert("成功")
        this.$message({
          message: '更新成功',
          type: 'success'
        })
      } else{
        // alert("失败")
        this.$message({
          message:"操作失败",
          type:"error"
        })
      }
      })
    },
    // 修改
    doMod(){
      this.$axios.post("/api/in_warehouse/update",this.form).then(res => {
        console.log(res);
      })
    },
    // 新增或者修改时时保存
    save(){
      this.$refs.form.validate((valid) => {
          if (valid) {
            if(this.form.id){
              // 修改
              this.doMod()
            }else{
              // 新增
              this.doSave();
            }
     
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      
    },

     // 删除
     handleDelete(id){
      console.log(id);
      this.$axios.delete("/api/in_warehouse/delete/" + id).then(res => {
        console.log(res);
        if(res.data.code == '200'){
          this.$message({
          type:"success",
          message:"删除成功"
        })
        }else{
          this.$message({
          type:"error",
          message:"删除失败"
        })
        }
        this.loadPost()  // 删除之后重新加载表格的数据

      })
    },

    // 编辑
    mod(row){
      console.log(row);
     
      // 先打开再异步处理
      this.centerDialogVisible = true

      this.$nextTick(() => {
         // 赋值到表单
        this.form.inType = row.inType
        this.form.number = row.number
        this.form.price = row.price
      })
    }
    // loadPost(){
    //   this.$axios.post('/api/in_warehouse/page',{
    //     "name": "扳手",
	  //     "pageNo": 1,
	  //     "pageSize": 8,
	  //     "vendorName": ""
    //   }).then(res => {
    //     console.log(res);
    //   })
    // }
    },
  beforeMount() {
    this.loadPost()
  }
}
</script>

<style scoped>
 
</style>